<!DOCTYPE html>
<html lang="">

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <title>秒杀首页</title>
    <!-- 引入字体图标 -->
    <link href="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/header.css">
    <link rel="stylesheet" href="css/banner1.css">
    <link rel="stylesheet" href="css/search.css">
    <link rel="stylesheet" href="./css/modal.css">
    <script src="js/jquery-3.7.1.min.js"></script>
</head>

<body>
<header>
    <img src="./images/img.png" alt="">
    <div class="search-box">
        <label>
            <input type="text" class="search-txt" placeholder="想搜啥?" oninput="showSuggestions(this.value)" />
        </label>
        <a class="search-btn">
            <i class="fa fa-search" aria-hidden="true"></i>
        </a>
        <div class="suggestions" id="suggestions"></div>
    </div>
    <ul>
        <li><a href="javascript:location.reload()">秒杀首页</a></li>
        <li><a href="seckiling.html">秒杀专区</a></li>
        <li><a href="shop.html">全部商品</a></li>
        <li><a href="customer.html">联系客服</a></li>
        <li><a href="user.html">个人中心</a></li>
        <li><a href="login.html" id="user">登录|注册</a></li>
    </ul>
</header>
<section class="banner1">
    <!-- 轮播图主体 -->
    <div class="swipe" id="swipe">
        <!-- 模糊背景 -->
        <div class="bg" id="swipe_bg"></div>
        <!-- 图片区域 -->
        <section>
            <!-- 图片显示 -->
            <div class="img-box" id="swipe_img_box">
                <a href="#" class="link" id="swipe_link">
                    <img src="images/banner/img.png" alt="" class="img" id="swipe_img">
                </a>
            </div>
            <!-- 指示点 -->
            <div class="select" id="swipe_select">
            </div>
            <!-- 左侧翻页按钮 -->
            <div class="btn left" id="swipe_btn_left">
                <!-- 字体图标：左箭头 -->
                <i class="fa fa-angle-left" aria-hidden="true"></i>
            </div>
            <!-- 右侧翻页按钮 -->
            <div class="btn right" id="swipe_btn_right">
                <!-- 字体图标：右箭头 -->
                <i class="fa fa-angle-right" aria-hidden="true"></i>
            </div>
        </section>
    </div>
    <div class="banner1-box">
        <div class="user-info-box">
            <div class="image">
                <img src="./images/avatar/780.jpg" alt="" id="userImage">
            </div>
            <div class="user-info">
                <table>
                    <tr>
                        <td id="welcome" height="30px">欢迎您，</td>
                        <td id="username" height="30px">游客（未登录）</td>
                    </tr>
                    <tr>
                        <td colspan="2" height="30px">登录发现更多精彩</td>
                    </tr>
                    <tr>
                        <td colspan="2" height="30px"><a href="login.html">立即登录</a></td>
                    </tr>
                    <tr>
                </table>
            </div>
        </div>
        <div class="goods-info-box" id="goods-info-box" onclick="window.location.href='seckiling.html'">
            <h1 style="margin-bottom: 10px">秒杀活动</h1>
            <div id="status" class="countdown2"></div>
            <div id="time" class="time-remaining"></div>
        </div>
    </div>
</section>
<section class="banner2">
    <div class="banner2-title">
        <img style="margin-top: 30px;" src="./images/img_8.png" alt="">
    </div>
    <div class="banner2-box">

    </div>
</section>
<div class="infoModal" id="infoModal">
    <div class="infoModalContent">
        <p id="infoTitle"></p>
        <button id="confirmBtn">确定</button>
    </div>
</div>
<script src="./js/swipe.js"></script>
<script src="./js/index.js"></script>
<script src="./js/show.js"></script>
<script src="./js/modal.js"></script>
<script src="./js/search.js"></script>
<script>
    // 鼠标滚轮滚动事件
    window.addEventListener("scroll",()=>{
        let header=document.querySelector("header");
        header.classList.toggle("sticky",window.scrollY>0);
    })
</script>
</body>
</html>